<template>
  <div
    class="content"
     ref="message"
  >
    <div>
      <h6 class="content-header">购票须知</h6>
      <div
        class="content-text"
        v-for="(item, key, index) of chooseList.introduce"
        :key="index"
      >
        <h6>
          <img
             class="content-text-icon"
             :src="item.textIconUrl"
             alt=""
          >
          {{key}}
        </h6>
        <div class="content-text-item">
          <div class="content-text-itemtext" v-for="(itemText, itemTextIndex) of item.innerText" :key="itemTextIndex">
            <h5 class="content-text-itemtext-title" :style="itemText.titlestyle">{{itemText.title}}</h5>
            {{itemText.text}}
          </div>
        </div>
      </div>
      <div class="fillzone"></div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'IntroduceMessage',
  props: {
    chooseList: Object
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.message, {
      preventDefault: true,
      useTransition: true,
      useTransform: true
    })
  }
}
</script>

<style lang="stylus" scoped>
  .fillzone
    height: .3rem;
  h6
    font-size: .3rem;
    font-family: Arial,"Microsoft Yahei","Helvetica Neue",Helvetica,sans-serif;
  .content
    padding: .28rem 0 .28rem .2rem;
    position: absolute;
    top: 1.68rem;
    left: 0;
    right: 0;
    bottom: 1rem;
    overflow: hidden;
    .content-header
      font-size: .32rem;
      font-family: Arial,"Microsoft Yahei","Helvetica Neue",Helvetica,sans-serif;
    .content-text
      padding-top: .3rem;
      color: #ff8300;
      .content-text-icon
        width: .34rem;
        height: .34rem;
      .content-text-item
        padding: 0 .46rem;
        color: #000;
        .content-text-itemtext
          margin-top: .14rem;
          font-size: .28rem;
          line-height: .42rem;
          .content-text-itemtext-title
            font-weight: bold;
          .content-text-itemtext-innericon
            width: .26rem;
            height: .26rem;
            vertical-align: top;
            margin-top: .06rem;
</style>
